<template>
  <div>
		<headTop></headTop>

    <div class="buttons-content">
    <el-button type="primary" icon="el-icon-plus" @click="addNewOrder()">添加订单</el-button>
    </div> 
  <search></search>
 <div style="margin:10px">
<el-table :data="orderList" border style="width: 100%" >
   <el-table-column
      type="index"
      width="50"
      label="序号"
      align="center">
    </el-table-column>
    <el-table-column prop="productNo" label="订单编号"  width="100" align="center"></el-table-column>
    <el-table-column prop="name" label="客户名称"  width="80" align="center"></el-table-column>
    <el-table-column prop="drawingPic" label="产品名称"  width="120" align="center">
       <template slot-scope="scope">
         <el-button @click="handleDrawClick(scope.row,false)" type="text"  size="small">点击查看</el-button>
        </template>
    </el-table-column>
        <el-table-column prop="name" label="产品型号"  width="80" align="center"></el-table-column>
    <el-table-column prop="stock" label="发货方式" align="center"></el-table-column>
    <el-table-column prop="warehouse" label="包装" align="center"></el-table-column>
    <el-table-column prop="customer" label="收货地址" align="center"></el-table-column>
    <el-table-column prop="remark" label="备注" align="center"></el-table-column>
    <el-table-column prop="create_time" label="创建时间" width="140" align="center"></el-table-column>
        <el-table-column prop="unit" label="数量" align="center"></el-table-column>
    <el-table-column prop="slug" label="单价"  align="center"></el-table-column>
    <el-table-column  prop="price" label="状态" align="center"></el-table-column>
   <el-table-column
      fixed="right"
      label="操作"
      width="100" 
      align="center">
      <template slot-scope="scope">
          <el-button  icon="el-icon-edit" circle></el-button>
          <el-button  type="danger" icon="el-icon-delete" circle></el-button>

      </template>
    </el-table-column>

  </el-table>
  <el-pagination
  class="page-bottom"
  :page-size="currentPageSize"
  :pager-count="pageCount"
  layout="prev, pager, next, jumper, ->, total"
  :total="totalCount"
  :current-page.sync="currentPage"
  @current-change = "currentPageChange">
  </el-pagination>
   </div>
  <el-dialog :title="imageTitle" :visible.sync="isImageVisible">
    <div v-for="(item, index) in srcList" :key="index" class="buttons-content">
     <el-image 
      style="width: 200px; height: 200px"
      :src="item"
      :preview-src-list="srcList"
      >
     </el-image>
    </div>
    <footer>
      <el-button type="primary">打印</el-button>
    </footer>
  </el-dialog>
<el-dialog title="修改产品" :visible.sync="isUpdateVisible">
       <editProduct :dataForm = "datasForm"></editProduct>

</el-dialog>
   </div>
</template>
<script>
import search from "@/components/searchView";
	import headTop from '@/components/headTop'
import {formatDate} from '@/utils/mUtils'
export default {
  inject:['reload'],
  data(){
    return {
      url:"../../assets/img/luosi.jpg",
        direction: 'rtl',
        orderList:[],
        currentImageUrl:'',
        srcList:[],
        isImageVisible:false,
        isUpdateVisible:false,
        isSample:false,
        imageTitle:'图纸',
        datasForm:[],
        drawList:[],
        sampleList:[],
        totalCount:0,
        currentPage:0,
        currentPageSize:10,
        pageCount:1
    }
  },
  mounted(){
    this.getProductList();
  },
  components: {
    search,
    headTop,
    },
    methods:{
   handleEditClick(row){
     this.drawList = row.drawingPic.split(',');
     this.sampleList = row.samplePic.split(',');
     this.$set(this.datasForm,'drawList',this.drawList);
     this.$set(this.datasForm,'sampleList',this.sampleList);
     this.datasForm = row;
     this.isUpdateVisible = true;
   },
   
   currentPageChange(val){
      this.currentPage = val;
       console.log('页码改变了' + this.currentPage);
      this.getProductList();
   },
    handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      removeProductClick(data){
        this.$confirm('是否永久删除该产品, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
         this.removeProduct(data.id);
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      
      },
      addNewProduct(){
				this.$router.push({ path: '/addproduct' })
      },
     async removeProduct(data){
         try {
           let params = {
             'id':data
           }
        const result = await deleteproduct(params);
        if (result.code == 200) {
           this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.reload();
        }
      } catch (error) {
         this.$message({
            type: 'error',
            message: '删除失败!'
          });
      }
      }

    }

}
</script>

<style lang="less">
.buttons-content {
    margin: 10px;
    border-radius: 8px;
    display: inline-flex;
		align-items: center;
}
.page-bottom {
  margin: 10px;
}
</style>